<template>
    <div class="all">
      <div class="order_content">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="orderId" label="订单编号" width="180">
          </el-table-column>
          <el-table-column prop="list" label="商品图片" width="180">
            <template slot-scope="scope">
              <el-image v-for="(item, index) in scope.row.list" :key="index" style="width: 100px; height: 100px"
                :src="item.detailImage"></el-image>
  
            </template>
          </el-table-column>
          <el-table-column prop="list" label="商品名称">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.list" :key="index">
                {{ item.detailName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="orderAmount" label="价格"> </el-table-column>
          <el-table-column prop="orderStatus" label="状态">
            <template slot-scope="scope">
              <div v-if="String(scope.row.orderStatus) === '1'">待付款</div>
              <div v-if="String(scope.row.orderStatus) === '2'">待收货</div>
              <div v-if="String(scope.row.orderStatus) === '3'">待收货</div>
              <div v-if="String(scope.row.orderStatus) === '4'">待收货</div>
              <div v-if="String(scope.row.orderStatus) === '5'">待评价</div>
              <!-- {{ String(scope.row.orderStatus) === '1' ? '待付款' : '已付款' }} -->
            </template>
          </el-table-column>
          
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
            <el-button type="warning">{{ String(scope.row.orderStatus) === '1' ? '付款' : '' }}</el-button>
            <el-button type="danger">{{ String(scope.row.orderStatus) === '1' ? '取消' : '' }}</el-button>
          </template>
          </el-table-column>
        
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  import { getOrderList } from '@/api/Order'
  import { mapGetters } from "vuex";
  export default {
    data() {
      return {
        tableData: [
        ],
        orderParams:{
            userId:1,
            orderStatus:5
        }
      };
  
    },
    computed: {
      ...mapGetters(["userId"]),
    },
    methods: {
      init() {
        console.log(this.userId);
        getOrderList(this.orderParams).then(res => {
          
          this.tableData = res.data
        })
      },
      test(n) {
        
  
      }
    },
    mounted() {
      this.init()
    },
  };
  </script>
  
  <style lang="scss">
  .all {
    .order_content {
      .el-table .cell {
        font-size: 20px;
        text-align: center;
      }
  
      .el-checkbox__inner {
        width: 20px;
        height: 20px;
      }
  
      .el-checkbox__inner::after {
        border: 3px solid #fff;
        border-left: 0;
        border-top: 0;
        left: 6px;
        top: 3px;
      }
  
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #e6a23c;
        border: 1px solid #e6a23c;
      }
  
      .el-table .cell {
        font-size: 20px;
        text-align: center;
      }
  
      .el-table span {
        display: block;
        // margin-bottom: 20px;
      }
    }
  }
  </style>
  
  
  
  